<template>
  <div id="app">
    <div class="header">
      <h1>患者分组</h1>
      <button class="manage-button" @click="showManageGroups">管理分组</button>
    </div>
    <ul class="group-list">
      <li v-for="group in groups" :key="group.groupId" class="group-item">
        <span @click="toDetailByGroup(group.groupId)">{{ group.groupName }}</span>
        <span>{{ group.groupNum }} 人</span>
      </li>
    </ul>

    <!-- 管理分组弹窗 -->
    <div v-if="isManagingGroups" class="modal">
      <div class="modal-content">
        <span class="close" @click="closeManageGroups">&times;</span>
        <h2>管理分组</h2>
        <input v-model="newGroupName" placeholder="新分组名称" class="input-field" />
        <button @click="addGroup" class="submit-button">添加分组</button>
        <hr />
        <ul>
          <li v-for="group in groups" :key="group.groupId" class="group-item">
            {{ group.groupName }}
            <button @click="confirmDeleteGroup(group.groupId)" class="delete-button">删除</button>
          </li>
        </ul>
      </div>
    </div>

    <!-- 删除确认弹窗 -->
    <div v-if="isDeleting" class="modal">
      <div class="modal-content">
        <span class="close" @click="closeDeleteConfirm">&times;</span>
        <h3>确认删除</h3>
        <p>确定要删除此分组吗？</p>
        <div class="button-group">
          <button @click="deleteGroup" class="confirm-button">确认删除</button>
          <button @click="closeDeleteConfirm" class="cancel-button">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {addPatientGroup, deletePatientGroup, getPatientGroupList} from "@/api/doctor/patient/patient";
import patientGroupDetail from "@/views/doctor/patientGroupDetail/index.vue";

export default {
  data() {
    return {
      groups: [],
      isManagingGroups: false,
      isDeleting: false,
      newGroupName: '',
      groupToDelete: null,
    };
  },

  created() {
    this.getGroupList();
  },

  methods: {


    // 点击分组跳转组内详情
    toDetailByGroup(groupId){
      this.$router.push({
        name: 'patientGroupDetail',
        params: {
          groupId: groupId
        }
      })
    },

    showManageGroups() {
      this.isManagingGroups = true;
    },
    closeManageGroups() {
      this.isManagingGroups = false;
      this.newGroupName = '';
    },
    //新增分组
    addGroup() {
      addPatientGroup(this.newGroupName).then(res => {
        if (res.code !== 500) {
          this.$message.success(res.msg)
          this.getGroupList()
        } else {
          this.$message.error(res.msg);
        }
      });
      this.newGroupName = '';
    },

    // 删除分组
    confirmDeleteGroup(groupId) {
      deletePatientGroup(groupId).then(res=>{
        if (res.code !== 500) {
          this.$message.success(res.msg)
          this.getGroupList();
        } else {
          this.$message.error(res.msg);
        }
      })
      this.isDeleting = false;
    },

    // 获取分组列表
    getGroupList() {
      getPatientGroupList().then(res => {
        if (res.code !== 500) {
          this.groups = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },

  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.group-list {
  list-style-type: none;
  padding: 0;
}

.group-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.manage-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.manage-button:hover {
  background-color: #0056b3;
}

/* 模态框样式 */
.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6); /* 更深的半透明背景 */
}

.modal-content {
  background-color: white;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 400px; /* 设置固定宽度，防止小屏幕时显得太窄 */
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* 阴影效果 */
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.input-field {
  width: calc(100% - 20px);
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.submit-button {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  margin: 10px 0;
}

.submit-button:hover {
  background-color: #218838;
}

.delete-button,
.confirm-button,
.cancel-button {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.delete-button:hover,
.confirm-button:hover,
.cancel-button:hover {
  background-color: #c82333;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

/* 分组项样式 */
.group-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
</style>
